<template>
	<view class="flex flex-column goods-detail">
		<GoodsSwiper id="main1" :res="imgList" :video="goodsDetail.goodsVideo" />

		<view class=" bg-white px-2">
			<view class="fs-40 font-weight-bold py-2">{{goodsDetail.goods_name}}</view>
			<view class="flex align-center justify-between">
				<view class="flex align-center font-weight-bold">
					<text class="fte87722 fs-40">¥{{day_amount}}</text>
					<text class="fte87722 fs-28">/天</text>
				</view>
				<text class="ft999999">库存：{{goodsDetail.stock}}</text>
			</view>
			<view class="flex align-center justify-between mt-2 pb-4">
				<view class="">
					<text class="ft666666">买断金额：</text>
					<text class="ft333333">¥{{goodsDetail.buyed_amount}}</text>
				</view>
				<view class="">
					<text class="ft666666">押金金额：</text>
					<text class="ft333333">¥{{goodsDetail.deposit_amount}}</text>
				</view>
			</view>
		</view>

		<view class=" bg-white my-2 p-2">
			<view class="fs-36 font-weight-bold mb-2">规格选择</view>
			<view v-if="goodsDetail.sku_attr.length">
				<view>
					<view v-for="(item,index) in goodsDetail.sku_attr" :key="index" class="mb-4">
						<view class="fs-30 mb-2">{{item.name}}</view>
						<view class="flex flex-wrap align-center text-white">
							<text @click="changeRule(item,rindex)" class="border py-1 rounded mr-3 text-center px-2 mb-1"
								:class="item.activeIndex === rindex?'bge87722 text-white bde87722':'bd666666 ft666666'"
								style="min-width: 100rpx;" v-for="(rule,rindex) in item.item2">{{rule}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="ft999999">还未设置规格属性</view>
		</view>

		<view class="bg-white p-2">
			<view class="fs-36 font-weight-bold">商品详情</view>
			<view class="ft666666 fs-24 mb-2 htmlContent pb-2 vhtml" v-if="goodsDetail.detail_info">
				<rich-text-with-video :html="goodsDetail.detail_info"></rich-text-with-video>
			</view>

		</view>
		<view style="height: 80px;"></view>
		<view class="position-fixed left-0 right-0 bottom-0 bg-white fs-32 py-1 px-3" style="z-index: 999;">
			<view class="flex align-center ">
				<view class=" text-white border bde87722 bge87722 text-center flex-1 mr-4 py-1 rounded"
					@click="navTo(`/pages/store/createGoods?id=${goodsDetail.id}`)">编辑商品信息</view>
				<view class=" fte87722 border bde87722 text-center flex-1 py-1 rounded"
					@click="navTo(`/pages/store/createSku?id=${goodsDetail.id}`)">编辑商品规格</view>
			</view>
			<view style="height: 20px;"></view>
		</view>
	</view>
</template>

<script>
	import config from "@/config/api.js";
	import {
		storeGoodsDetails
	} from "@/api/store.js";
	import GoodsSwiper from "./components/-goods-swiper.vue"; //轮播图组件
	export default {
		components: {
			GoodsSwiper
		},
		data() {
			return {
				config,
				id: null,
				imgList: [],
				goodsDetail: {
					sku_attr: []
				},
				skus: [],
				curSku: {},
				viewed: false
			}
		},
		computed: {
			day_amount() {
				if (this.curSku && this.curSku.id) {
					return Number(this.curSku.price / this.curSku.specs['租期']).toFixed(2)
				}
				return this.goodsDetail.day_amount
			}
		},
		watch: {
			'goodsDetail.sku_attr': {
				handler(val) {
					const curKey = val.map(i => i.item[i.activeIndex])
					// console.log('curKey-----', curKey)
					this.curSku = this.skus.find(sku => this.areElementsEqual(sku.key, curKey))
					console.log('this.curSku---', this.curSku)
				},
				deep: true
			}
		},
		onLoad(query) {
			this.id = query.id || ''
			if (!this.id || this.viewed) return
			this.storeGoodsDetails()
		},
		onShow() {
			if (this.viewed) return
			this.storeGoodsDetails()
		},
		methods: {
			areElementsEqual(arr1, arr2) {
				// 先判断长度是否相同
				if (arr1.length !== arr2.length) {
					return false;
				}

				// 创建数组副本并排序（避免修改原数组）
				const sortedArr1 = [...arr1].sort();
				const sortedArr2 = [...arr2].sort();
				// 比较排序后的数组
				for (let i = 0; i < sortedArr1.length; i++) {
					// 对于基本类型直接比较，对于对象等复杂类型需要额外处理
					if (String(sortedArr1[i]) !== String(sortedArr2[i])) {
						return false;
					}
				}

				return true;
			},
			changeRule(item, rindex) {
				item.activeIndex = rindex
				console.log('item-----', this.goodsDetail.sku_attr)
			},
			storeGoodsDetails() {
				this.viewed = true
				storeGoodsDetails({
					id: this.id
				}).then(res => {
					this.viewed = false
					const goods = res.data.goods
					goods.sku_attr = goods.sku_attr.map(sku => {
						sku.item2 = JSON.parse(JSON.stringify(sku.item))
						if (sku.name === '租期') {
							sku.item2 = sku.item2.map(i => i + '天')
						}
						return {
							name: sku.name,
							item: sku.item,
							item2: sku.item2,
							activeIndex: 0
						}
					})
					this.skus = goods.sku.skus.map(item => {
						return {
							...item,
							key: Object.values(item.specs)
						}
					})
					console.log('this.skus', this.skus)
					this.goodsDetail = goods
					this.goodsDetail.detail_info = this.goodsDetail.detail_info.replace(
						/<img/g,
						`<img class="rich-img"`
					);
					this.imgList = this.goodsDetail.images
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-detail ::v-deep .vhtml {
		overflow: hidden;
		width: 100%;
	}

	.vhtml {
		::v-deep img {
			display: block !important;
			width: 100%;
		}
	}

	::v-deep img {
		width: 100%;
	}
</style>